<template>
	<div class="margin-top">
		<Header  @changeLanguage="changeLanguage" />
		<div class="wrap">
			<Title :pageName="title" />
			<div class="policy">
				<div class="item">
					<div class="policy-img" @click="toList(1)">
						<img src="../assets/cyzc1.jpg"  />
						<span class="t" >{{ policy_subtitle[0] }}</span>
					</div>
					<div class="desc">
						<div class="sub-item" v-for="(item, index) in list1" :key="index" @click="toDetails(item)">
							• {{ item.name }}
						</div>
					</div>
					<div class="more" @click="toList(1)">{{ more }}</div>
				</div>

				<div class="item">
					<div class="policy-img" @click="toList(2)" >
						<img src="../assets/cyzc2.jpg"/>
						<span class="t">{{ policy_subtitle[1] }}</span>
					</div>
					<div class="desc">
						<div class="sub-item" v-for="(item, index) in list2" :key="index" @click="toDetails(item)">
							• {{ item.name }}
						</div>
					</div>
					<div class="more" @click="toList(2)">{{ more }}</div>
				</div>

				<div class="item">
					<div class="policy-img" @click="toList(3)">
						<img src="../assets/cyzc3.jpg"  />
						<span class="t">{{ policy_subtitle[2] }}</span>
					</div>
					<div class="desc">
						<div class="sub-item" v-for="(item, index) in list3" :key="index" @click="toDetails(item)">
							• {{ item.name }}
						</div>
					</div>
					<div class="more" @click="toList(3)">{{ more }}</div>
				</div>
			</div>
		</div>
		<Footer />
	</div>
</template>

<script>
	import {
		policy,
		more
	} from "@/lang";
	import Header from "@/components/Header";
	import Title from "@/components/Title";
	import Footer from "@/components/Footer";
	import {
		getPolicySub
	} from "@/api";
	export default {
		name: "policy",
		components: {
			Header,
			Title,
			Footer,
		},
		data() {
			return {
				title: "",
				langCode: "",
				list1: [],
				list2: [],
				list3: [],
				policy: policy,
				policy_subtitle: [],
				langMore: more,
				more: "",
			};
		},
		created() {
			const lang = localStorage.getItem("lang");
			this.langCode = lang === "ZH" ? 0 : 1;
			this.setPageLanguage(lang);
			this.onSend();
		},
		methods: {
			onSend() {
				this.getList();
			},
			async getList() {
				let self = this;
				const res = await getPolicySub({
					lang: self.langCode,
				});
				this.list1 = res.policy_1;
				this.list2 = res.policy_2;
				this.list3 = res.policy_3;
			},
			setPageLanguage(_lang) {
				const lang = _lang.toLowerCase();
				this.title = this.policy.title[lang];
				this.more = this.langMore[lang];
				this.policy_subtitle = this.policy.sub_title[lang];
			},
			changeLanguage(lang) {
				this.langCode = lang === "ZH" ? 0 : 1;
				this.setPageLanguage(lang);
				this.onSend();
			},
			toList(type) {
				this.$router.push({
					path: "/policy_list",
					query: {
						type: type,
					},
				});
			},
			toDetails(item) {
				localStorage.setItem("details", JSON.stringify(item));
				this.$router.push({
					path: "/details_page",
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.wrap {
		min-height: 45vh;
	}

	.policy {
		display: flex;
		flex-wrap: wrap;
		width: 1200px;
		margin: 0 auto;
		justify-content: space-between;

		.policy-img {
			position: relative;
			overflow: hidden;
			cursor: pointer;
			.t {
				display: block;
				position: absolute;
				text-align: center;
				color: #fff;
				font-size: 28px;
				font-weight: 600;
				width: 90%;
				left: 5%;
				top: 50%;
				z-index: 100;
				line-height: 1;
				margin-top: -14px;

			}
		}

		.item {
			width: 390px;
			color: #474747;

			.desc {
				margin-top: 15px;
				margin-bottom: 15px;

				.sub-item {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					cursor: pointer;
					line-height: 1.6;
				}

				.sub-item:hover {
					color: #255389
				}
			}

			img {
				display: block;
				width: 100%;
				cursor: pointer;
			}
		}



		.item:nth-child(2) {
			margin: 0 15px;
		}
	}

	.more {
		text-align: right;
		color: #255389;
		font-weight: 600;
		cursor: pointer;
	}
</style>
